<template>
	<view class="message">
		<view v-for="(item,index) in $store.state.conversationList" v-show="!majorList.includes(item.conversationID)" :key="index" class="contacts-list"
			@click="go(item)">
			<view :key="index" class="contacts-item">
				<view v-show="item.unreadMessageCount > 0" class="unread">
					{{ item.unreadMessageCount }}
				</view>
				<image
					:src="item.conversationAvatarUrl ? item.conversationAvatarUrl: 'https://api.xiaozhucaishui.com/assets/img/avatar.png'"
					class="avatar" mode="aspectFill" alt="" :lazy-load="true" />
				<view class="contacts-info">
					<view class="name">
						{{ item.conversationName }}
					</view>
					<view class="text-ellipsis">
						{{ getShowMessage(item) }}
					</view>
				</view>
			</view>
		</view>
		<view v-show="$store.state.conversationList.length == 0" class="" style="padding-top: 40rpx;">
			<u-empty mode="message"></u-empty>
		</view>
	</view>
</template>

<script>
	import loginApi from "@/api/login.js"
	export default {
		data() {
			return {
				majorList: [],
				// 展示最新消息
				getShowMessage: function(item) {
					if (!item.lastMessage) return "";
					let type = JSON.parse(item.lastMessage.extendedData).type;
					if (type == 11) return "[图片]";
					else if (type == 111) return "[表情]";
					else return item.lastMessage.message;
				},
			};
		},
		onReady() {
			this.init()
		},
		onShow() {
			this.$store.dispatch('queryConversationList')
		},
		computed: {},
		methods: {
			async init() {
				const res = await loginApi.get_major_list_id({});
				if (res.code == 1) {
					this.majorList = [];
					for (let item of res.data) {
						this.majorList.push(item.user_id + '');
					}
				}
			},

			go(item) {
				uni.navigateTo({
					url: '/pages/message/chat?id=' + item.conversationID
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		min-height: 100vh;
		background-color: #fff;
	}

	.contacts-list {}

	.contacts-item {
		display: flex;
		align-items: center;
		height: 175rpx;
		max-height: 175rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #EDEDED;
		position: relative;

		&:active {
			background-color: #F7F8FA;
		}

		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}

		.contacts-info {
			padding-left: 22rpx;

			.name {
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
			}

			.text-ellipsis {
				font-size: 24rpx;
				color: #999999;
				padding-top: 18rpx;
			}
		}

		.unread {
			position: absolute;
			width: 36rpx;
			height: 36rpx;
			border-radius: 36rpx;
			line-height: 36rpx;
			text-align: center;
			font-size: 24rpx;
			color: #ffffff;
			right: 10px;
			background: #FF6161;
		}
	}
</style>